@import '~css/echoes-variables.scss';

:host {
	$line-height: 5.5rem;

	line-height: 1.5rem;

	.yt-media-title {
		color: $brand-primary;
		margin: 0 1rem 0 0;
		display: inline-block;
		max-width: 40rem;
		font-size: 1.5rem;
		line-height: $line-height;

		aside {
			position: relative;
			margin-right: 1rem;
			cursor: pointer;

			img {
				height: $line-height;
			}
			.fa {
				position: absolute;
				right: 0;
				bottom: 0;
				background: rgba(0,0,0, .5);
			}
		}

		.title {
		    text-shadow: 0px 0px .5rem $dark;
		    font-family: $font-family-narrow;
		    font-size: 2rem;
		}
	}

	.dropup {
		padding: 1.2rem 0;
	}

	.dropdown-menu {
		left: -36rem;

		&::after {
			right: 1rem;
			left: auto !important;
		}

	}

	.dropdown-toggle:hover {
		color: $inverse;
	}

	.open .dropdown-toggle {
		background-color: $btn-primary-bg;
	}
	.track-info {
		width: 38rem;

		// max-width: 400px;
		overflow: auto;
		white-space: pre-line;
		padding: 0;
		color: white;
		max-height: 24rem;
		word-wrap: break-word;
		line-height: 1.5;

		img {
			width: 100%;
		}

		li a {
			color: $inverse;
		}
	}
}
